<template>
  <div class="app-container">
    <!--工具栏-->
    <Search :crud="crud">
      <el-form-item label="主题名称">
        <el-input v-model="query.clubTheme" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="类型">
        <el-select v-model="query.clubType" placeholder="请选择">
          <el-option
            v-for="item in dict.CLUB_TYPE"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
    </Search>
    <el-card>
      <div class="head-container">
        <crudOperation :permission="permission">
          <template slot="right">
            <el-button
              size="mini"
              class="filter-item"
              type="warning"
              icon="el-icon-download"
              @click="downloadMethod"
              :loading="exprotLoad"
              >导出</el-button
            >
            <!-- <el-button class="filter-item" size="mini" type="primary" icon="el-icon-delete" @click="handle(null,'batchDelete')">批量删除</el-button> -->
          </template>
        </crudOperation>
      </div>
      <el-table
        ref="table"
        border
        v-loading="crud.loading"
        :data="crud.data"
        style="width: 100%"
        @selection-change="crud.selectionChangeHandler"
      >
        <el-table-column
          type="selection"
          width="55"
          align="center"
          fixed="left"
        />
        <el-table-column label="序号" type="index" width="50" align="center" />
        <el-table-column
          label="俱乐部标题"
          prop="clubTheme"
          minWidth="200"
          align="center"
        />
        <el-table-column prop="clubType" label="俱乐部类型" align="center">
          <template slot-scope="scope">
            <div>{{ showDictValue(scope.row.clubType, dict.CLUB_TYPE) }}</div>
          </template>
        </el-table-column>

        <el-table-column prop="userName" label="报名人名称" align="center" />
        <el-table-column prop="createdByName" label="创建人" align="center" />
        <el-table-column prop="createdAtView" label="创建时间" align="center" />
      </el-table>
      <!--分页组件-->
      <pagination />
    </el-card>
  </div>
</template>

<script>
import crudJob from '@/api/system/job'
import CRUD, { presenter, header, crud } from '@crud/crud'
import crudOperation from '@crud/CRUD.operation'
import pagination from '@crud/Pagination'
import udOperation from '@crud/UD.operation'
import Search from '@/components/Search'
import product from '@/api/product/product'
import club from '@/api/club/index'
import { apiExport } from '@/api/club/clubRegistration'
import ClubDialog from '@/views/club/clubDialog.vue'
import { showDictValue } from '@/utils'
export default {
  name: 'BrandIntroductionManage',
  components: { crudOperation, pagination, udOperation, Search, ClubDialog },
  cruds() {
    return CRUD({
      title: '报名记录',
      url: 'clubRegistration/list',
      requestMethod: 'post',
      sort: ['jobSort,asc2', 'id,desc'],
      // takingType:'3',
      otherParams: { takingType: '3' },
      crudMethod: { ...crudJob },
    })
  },
  // mixins: [presenter()],
  mixins: [presenter(), header(), crud()],
  // 数据字典
  dicts: ['CLUB_TYPE'],
  data() {
    return {
      permission: {
        add: ['admin', 'job:add'],
        edit: ['admin', 'job:edit'],
        del: ['admin', 'job:del'],
      },
      exprotLoad: false,
    }
  },
  methods: {
    showDictValue,
    downloadMethod() {
      this.exprotLoad = true
      apiExport(this.query)
        .then((data) => {
          // 检查响应数据
          const blob = new Blob([data], {
            type: 'application/vnd.ms-excel;charset=UTF-8',
          })
          const link = document.createElement('a')
          link.href = URL.createObjectURL(blob)
          link.download = '俱乐部报名记录表.xls'
          link.style.display = 'none'
          document.body.appendChild(link)
          link.click()
          document.body.removeChild(link)
        })
        .finally(() => {
          this.exprotLoad = false
        })
      // exportTableData(url)
    },
  },
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep .el-input-number .el-input__inner {
  text-align: left;
}
.item {
  margin-top: 10px;
  margin-right: 10px;
}
</style>
